<template>
  <div class="container">
    <button @click="addCount">count+1</button>

    count ==> {{ count }}
    counter ==> {{ counter }}
    <p>
      doubleCounter ==> {{doubleCounter}}
    </p>
  </div>  
</template>

<script>
import {onMounted, ref, watch, toRefs, computed } from "vue"
export default {
  props: {
    count: { type: Number },
    // user: { type: Number, default: 20 }
    // user: { type: String, default: 'hang' }
  },
  // mounted () {
  //   this.addCount() // 1
  // },

  setup(props, context){
    console.log("context ==> ", context);
    // console.log("context.attrs ==> ", context.attrs);
    // console.log("context.slots ==> ", context.slots);
    // console.log("context.emit ==> ", context.emit);

    // console.log("attrs ==> ", attrs);
    // console.log("slots ==> ", slots);
    // console.log("emit ==> ", emit);


    console.log("props ==> ", props);

    const { count } = toRefs(props)
    console.log("count ==> ", count);

    let counter = ref(0)
    console.log("counter ==> ", counter);
    // console.log("counter ==> ", counter.value);
    const addCount = () => {
      counter.value++
    }
    const handleNum = () => {
      console.log("xxx");
    }

    const doubleCounter = computed(() => {
      return counter.value * 2
    })

    const testWatch = (newVal, oldVal) => {
      console.log("count watch...");
      console.log("newVal, oldVal ==> ", newVal, oldVal);
    }

    watch(count, testWatch)

    onMounted(addCount)

    return{
      addCount,
      handleNum,
      counter,
      doubleCounter
    }
  }

}

</script>
